<template>
  <div id="cesiumContainer" class="cesium-map"></div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue';
import * as Cesium from 'cesium';
import 'cesium/Build/Cesium/Widgets/widgets.css';

// ✅ 使用您的天地图 TOKEN
const TIANDITU_TOKEN = '40ebdf578d4b77c8f3e64238cf2f2431';

let viewer = null;

onMounted(() => {
  // 初始化 Cesium Viewer
  viewer = new Cesium.Viewer('cesiumContainer', {
    // 禁用不必要的控件
    animation: false,
    timeline: false,
    baseLayerPicker: false,
    geocoder: false,
    homeButton: false,
    infoBox: false,
    navigationHelpButton: false,
    sceneModePicker: false,
    selectionIndicator: false,
    
    // 关键设置：禁用默认的Bing地图图层
    imageryProvider: false,
  });
  
  // 添加天地图影像图层（底图）
  const tdtImg = new Cesium.WebMapTileServiceImageryProvider({
    url: `https://t{s}.tianditu.gov.cn/img_w/wmts?tk=${TIANDITU_TOKEN}`,
    layer: 'img',
    style: 'default',
    format: 'tiles',
    tileMatrixSetID: 'w',
    subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
    maximumLevel: 18,
    tilingScheme: new Cesium.WebMercatorTilingScheme(),
    credit: new Cesium.Credit('天地图影像')
  });

  // 添加天地图中文注记图层
  const tdtCia = new Cesium.WebMapTileServiceImageryProvider({
    url: `https://t{s}.tianditu.gov.cn/cia_w/wmts?tk=${TIANDITU_TOKEN}`, // 注意这里是cia_w不是cia_c
    layer: 'cia',
    style: 'default',
    format: 'tiles',
    tileMatrixSetID: 'w',
    subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
    maximumLevel: 18,
    tilingScheme: new Cesium.WebMercatorTilingScheme(),
    credit: new Cesium.Credit('天地图注记')
  });

  // 添加图层到地球
  viewer.imageryLayers.addImageryProvider(tdtImg);
  viewer.imageryLayers.addImageryProvider(tdtCia);

  // 设置初始视角：显示完整地球
  viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(116.40969, 39.89945, 500000), // 从太空看地球
    orientation: {
      heading: Cesium.Math.toRadians(0),
      pitch: Cesium.Math.toRadians(-90), // 俯视地球
      roll: 0
    },
    duration: 3
  });
});

// 组件卸载时销毁Cesium实例
onUnmounted(() => {
  if (viewer && !viewer.isDestroyed) {
    viewer.destroy();
  }
});
</script>

<style scoped>
.cesium-map {
  width: 100%;
  height: 100vh; /* 确保全屏显示 */
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>